<template>
  <div>
    <el-dialog title="查看实施方案流程图" :visible="show" :modal-append-to-body="false" :before-close="cmdClose" center @open="cmdInit" width="1200px" top="6vh">
      <el-card>
        <div class="box" ref="box">
          <div id="mountNode" class="canvasStyle"></div>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import G6 from '@antv/g6'
import { getNode } from '@/unils/utils'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    nodeId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      curNodeId: '',
      graph: {},
      nodeIdId: '',
      w: 0,
      // 节点样式
      drawingFill: '#808080',
      checkFill: '#808080',
      tongguoFill: '#808080',
      notCheckStroke: '#808080',
      budgetFill: '#808080',
      parameterFill: '#808080',
      implementationFill: '#808080',
      drawingPDFFill: '#808080',
      budgetPDFFill: '#808080',
      parameterPDFFill: '#808080',
      combineFill: '#808080',
      dayinFill: '#808080',
      printFill: '#808080',
      // 边样式
      drawingType: 'line',
      checkType: 'line',
      notCheckType: 'polyline',
      budgetType: 'line',
      parameterType: 'line',
      implementationType: 'line',
      parallelType: 'polyline',
      combineType: 'polyline',
      printType: 'line',
      //
      printTypeStroke: '#808080',
      notPrintTypeStroke: '#808080',
      endStroke: '#808080',
    }
  },
  methods: {
    cmdInit () {
      this.w = Math.floor(window.innerHeight - window.innerHeight / 100 * 6 - 150)
      this.nodeIdId = getNode(this.nodeId)
      // console.log(this.nodeId)
      this.curNodeId = this.nodeId

      // 处理节点样式--------
      let nodeFill = (curNodeIdId, nodeTime, curEdgeType) => {
        let nodeFill = '#808080'  // 灰色
        let edgeType = 'line'
        if (this.curNodeId === curNodeIdId) {
          nodeFill = '#409EE1'  // 蓝色
          edgeType = curEdgeType
        } else if (nodeTime) {
          nodeFill = '#67C23A'  // 绿色
        }
        return { nodeFill, edgeType }
      }
      // 图纸
      if (this.curNodeId === 'T10003') {
        this.drawingFill = '#409EE1'
        this.drawingType = 'circle-running'
        if (this.$parent.type == 0) {
          this.drawingType = 'line'
          this.notCheckType = 'circle-runningPolyline'
          this.notCheckStroke = '#409EE1'
        }
        // console.log(this.$parent)
      } else if (this.$parent.DrawingTime) {
        this.drawingFill = '#67C23A'
      }
      // 审核
      if (this.curNodeId === 'T10004') {
        this.checkFill = '#409EE1'
        this.checkType = 'circle-running'
      } else if (this.$parent.DrawingTime) {
        this.checkFill = '#67C23A'
        if (this.curNodeId === 'T10003') {
          this.checkFill = '#E6A23C'
        }
      }
      // 通过
      if (this.curNodeId.length > 8) {
        this.nodeIdId = 8
      }
      if (this.nodeIdId >= 5) {
        this.tongguoFill = '#67C23A'
      } else if (this.$parent.CheckTime) {
        this.tongguoFill = 'red'
        if (this.curNodeId === 'T10004') {
          this.tongguoFill = '#808080'
        }
      }
      // 预算
      let budgetFun = nodeFill('T10005', this.$parent.BudgetTime, 'circle-running')
      this.budgetFill = budgetFun.nodeFill
      this.budgetType = budgetFun.edgeType
      // 参数表
      let parameterFun = nodeFill('T10006', this.$parent.ParameterTime, 'circle-running')
      this.parameterFill = parameterFun.nodeFill
      this.parameterType = parameterFun.edgeType
      // 实施方案
      let implementationFun = nodeFill('T10007', this.$parent.ImplementationTime, 'circle-running')
      this.implementationFill = implementationFun.nodeFill
      this.implementationType = implementationFun.edgeType
      // 并行
      if (this.curNodeId === 'T10008' || this.curNodeId === 'T10009' || this.curNodeId === 'T10010') {
        this.parallelType = 'circle-runningPolyline'
      }
      let drawingPDFFun = nodeFill('T10008', this.$parent.DrawingPDFTime, 'circle-runningPolyline')
      this.drawingPDFFill = drawingPDFFun.nodeFill
      let budgetPDFFun = nodeFill('T10009', this.$parent.BudgetPDFTime, 'circle-runningPolyline')
      this.budgetPDFFill = budgetPDFFun.nodeFill
      let parameterPDFFun = nodeFill('T10010', this.$parent.ParameterPDFTime, 'circle-runningPolyline')
      this.parameterPDFFill = parameterPDFFun.nodeFill
      // 合并
      if (this.curNodeId === 'T10011') {
        this.combineType = 'circle-runningPolyline'
        this.combineFill = '#409EE1'
      } else if (this.$parent.DrawingPDFTime && this.$parent.BudgetPDFTime && this.$parent.ParameterPDFTime) {
        this.combineFill = '#67C23A'
      }
      // 打印
      if (this.nodeIdId >= 12) {
        this.dayinFill = '#67C23A'
      }
      // 打印方案
      if (this.curNodeId === 'T10012') {
        this.printFill = '#409EE1'
        this.printType = 'circle-running'
        this.printTypeStroke = '#409EE1'

      }
      if (!this.$parent.PrintTime && this.$parent.status == 'end') {
        this.notPrintTypeStroke = '#409EE1'
      }
      // 结束
      if (this.curNodeId === 'T10013') {
        if (this.$parent.PrintTime) {
          this.printFill = '#67C23A'
          this.printTypeStroke = '#409EE1'
          this.endStroke = '#409EE1'
        } else {
          this.dayinFill = '#E6A23C'
        }
      }

      this.$nextTick(() => {
        this.createGraph()
      })
    },
    cmdClose () {
      this.graph.destroy()
      this.$emit('closeDlg')
    },
    createGraph () {
      G6.registerEdge(
        'circle-running',
        {
          afterDraw (cfg, group) {
            const shape = group.get('children')[0];
            const startPoint = shape.getPoint(0);

            const circle = group.addShape('circle', {
              attrs: {
                x: startPoint.x,
                y: startPoint.y,
                fill: '#1890ff',
                r: 3,
              },
              name: 'circle-shape',
            });

            circle.animate(
              (ratio) => {
                const tmpPoint = shape.getPoint(ratio);
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,
                };
              },
              {
                repeat: true,
                duration: 800,
              },
            );
          },
        },
        'line',
      );
      G6.registerEdge(
        'circle-runningPolyline',
        {
          afterDraw (cfg, group) {
            const shape = group.get('children')[0];
            const startPoint = shape.getPoint(0);

            const circle = group.addShape('circle', {
              attrs: {
                x: startPoint.x,
                y: startPoint.y,
                fill: '#1890ff',
                r: 3,
              },
              name: 'circle-shape',
            });

            circle.animate(
              (ratio) => {
                const tmpPoint = shape.getPoint(ratio);
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,
                };
              },
              {
                repeat: true,
                duration: 1000,
              },
            );
          },
        },
        'polyline',
      );

      G6.registerEdge(
        'line-growth',
        {
          afterDraw (cfg, group) {
            const shape = group.get('children')[0];
            const length = shape.getTotalLength();
            shape.animate(
              (ratio) => {
                const startLen = ratio * length;
                const cfg = {
                  lineDash: [startLen, length - startLen],
                };
                return cfg;
              },
              {
                repeat: true,
                duration: 2000,
              },
            );
          },
        },
        'line',
      );
      G6.registerEdge(
        'line-growthPolyline',
        {
          afterDraw (cfg, group) {
            const shape = group.get('children')[0];
            const length = shape.getTotalLength();
            shape.animate(
              (ratio) => {
                const startLen = ratio * length;
                const cfg = {
                  lineDash: [startLen, length - startLen],
                };
                return cfg;
              },
              {
                repeat: true,
                duration: 2000,
              },
            );
          },
        },
        'polyline',
      );

      const thisdata = {
        nodes: [
          {
            id: 'T10001',
            type: 'rect',
            x: 500,
            y: 50,
            anchorPoints: [
              [0.5, 1]
            ],
            label: '开始',
            style: {
              width: 100,
              height: 50,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            },
            nodeStateStyles: {
              hover: {
                fill: 'black',
              },
            },
          },
          {
            id: 'T10002',
            type: 'rect',
            x: 500,
            y: 150,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '设计方案\n1.0设计方案原资料',
            style: {
              width: 200,
              height: 75,
              radius: 10,
              cursor: 'pointer',
              fill: '#67C23A',
              lineWidth: 0
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10003',
            type: 'rect',
            x: 500,
            y: 275,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1],
              [0, 0.5]
            ],
            label: '2.0负责图纸修改\n核对清单数量',
            style: {
              width: 200,
              height: 75,
              fill: this.drawingFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10004',
            type: 'rect',
            x: 500,
            y: 375,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '3.0负责审核',
            style: {
              width: 200,
              height: 50,
              fill: this.checkFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10004.5',
            type: 'diamond',
            x: 500,
            y: 450,
            size: [100, 50],
            anchorPoints: [
              [0.5, 0],
              [0.5, 1],
              [0, 0.5]
            ],
            label: '通过',
            style: {
              fill: this.tongguoFill,
              lineWidth: 0,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10005',
            type: 'rect',
            x: 500,
            y: 550,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '4.0负责预算',
            style: {
              width: 200,
              height: 50,
              fill: this.budgetFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10006',
            type: 'rect',
            x: 500,
            y: 650,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '5.0负责参数表\n含品牌型号',
            style: {
              width: 200,
              height: 75,
              fill: this.parameterFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10007',
            type: 'rect',
            x: 500,
            y: 750,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '6.0负责实施方案',
            style: {
              width: 200,
              height: 50,
              fill: this.implementationFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10008',
            type: 'rect',
            x: 250,
            y: 875,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '7.0图纸导PDF',
            style: {
              width: 200,
              height: 50,
              fill: this.drawingPDFFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10009',
            type: 'rect',
            x: 500,
            y: 875,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '8.0预算导PDF',
            style: {
              width: 200,
              height: 50,
              fill: this.budgetPDFFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10010',
            type: 'rect',
            x: 750,
            y: 875,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '9.0参数表导PDF',
            style: {
              width: 200,
              height: 50,
              fill: this.parameterPDFFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10011',
            type: 'rect',
            x: 500,
            y: 975,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '10.0合并完整方案',
            style: {
              width: 200,
              height: 50,
              fill: this.combineFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10011.5',
            type: 'diamond',
            x: 500,
            y: 1050,
            size: [100, 50],
            anchorPoints: [
              [0.5, 0],
              [0.5, 1],
              [1, 0.5]
            ],
            label: '打印',
            style: {
              fill: this.dayinFill,
              lineWidth: 0,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10012',
            type: 'rect',
            x: 500,
            y: 1175,
            anchorPoints: [
              [0.5, 0],
              [0.5, 1]
            ],
            label: '11.0打印方案\n合并后的PDF:\n沃的沃OA打印\n华维打印',
            style: {
              width: 200,
              height: 125,
              fill: this.printFill,
              lineWidth: 0,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            }
          },
          {
            id: 'T10013',
            type: 'rect',
            x: 500,
            y: 1300,
            anchorPoints: [
              [0.5, 0],
              [1, 0.5]
            ],
            label: '结束',
            style: {
              width: 200,
              height: 50,
              fill: (this.$parent.status == 'end') ? '#67C23A' : 'white',
              stroke: 'black',
              lineWidth: 3,
              radius: 10,
              cursor: 'pointer'
            },
            labelCfg: {
              style: {
                fill: 'black',
                fontSize: 20,
                fontWeight: 'bold',
                cursor: 'pointer'
              }
            },
          }
        ],
        edges: [
          {
            source: 'T10001',
            target: 'T10002',
            style: {
              stroke: '#0099CC',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10002',
            target: 'T10003',
            type: this.drawingType,
            style: {
              stroke: '#0099CC',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10003',
            target: 'T10004',
            type: this.checkType,
            style: {
              stroke: this.$parent.DrawingTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10004',
            target: 'T10004.5',
            style: {
              stroke: this.$parent.CheckTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10004.5',
            target: 'T10005',
            type: this.budgetType,
            sourceAnchor: 0,
            targetAnchor: 0,
            label: '是',
            labelCfg: {
              refX: 20
            },
            style: {
              stroke: this.$parent.CheckTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            }
          },
          {
            source: 'T10004.5',
            target: 'T10003',
            type: this.notCheckType,
            sourceAnchor: 2,
            targetAnchor: 2,
            label: '否',
            style: {
              stroke: this.notCheckStroke,
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10005',
            target: 'T10006',
            type: this.parameterType,
            style: {
              stroke: this.$parent.BudgetTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10006',
            target: 'T10007',
            type: this.implementationType,
            style: {
              stroke: this.$parent.ParameterTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          // 并行开始
          {
            source: 'T10007',
            target: 'T10008',
            type: this.parallelType,
            style: {
              stroke: this.$parent.ImplementationTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10007',
            target: 'T10009',
            type: this.parallelType,
            style: {
              stroke: this.$parent.ImplementationTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10007',
            target: 'T10010',
            type: this.parallelType,
            style: {
              stroke: this.$parent.ImplementationTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          // 并行结束
          {
            source: 'T10008',
            target: 'T10011',
            type: this.combineType,
            style: {
              stroke: (this.$parent.DrawingPDFTime && this.$parent.BudgetPDFTime && this.$parent.ParameterPDFTime) ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10009',
            target: 'T10011',
            type: this.combineType,
            style: {
              stroke: (this.$parent.DrawingPDFTime && this.$parent.BudgetPDFTime && this.$parent.ParameterPDFTime) ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10010',
            target: 'T10011',
            type: this.combineType,
            style: {
              stroke: (this.$parent.DrawingPDFTime && this.$parent.BudgetPDFTime && this.$parent.ParameterPDFTime) ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          //
          {
            source: 'T10011',
            target: 'T10011.5',
            style: {
              stroke: this.$parent.CombineTime ? '#0099CC' : '#808080',
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10011.5',
            target: 'T10012',
            type: this.printType,
            label: '是',
            labelCfg: {
              refX: 20
            },
            sourceAnchor: 0,
            targetAnchor: 0,
            style: {
              stroke: this.printTypeStroke,
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10011.5',
            target: 'T10013',
            type: 'polyline',
            sourceAnchor: 2,
            targetAnchor: 1,
            label: '否',
            style: {
              stroke: this.notPrintTypeStroke,
              lineWidth: 3,
              endArrow: true,
            },
          },
          {
            source: 'T10012',
            target: 'T10013',
            style: {
              stroke: this.endStroke,
              lineWidth: 3,
              endArrow: true,
            },
          }
        ]
      }

      const minimap = new G6.Minimap({
        size: [120, 80],
        className: 'minimap',
      })
      this.graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        // height: 700,
        height: this.w,
        fitView: true,
        modes: {
          default: ['drag-canvas', 'zoom-canvas'],
          // default: ['drag-canvas'],
        },
        // plugins: [minimap],
        nodeStateStyles: {
          hover: {
            stroke: '#409EE1',
            lineWidth: 3,
          },
          // click: {
          //   stroke: 'green',
          //   lineWidth: 3,
          // },
        },
        // edgeStateStyles: {
        //   click: {
        //     stroke: 'green',
        //   },
        //   hover: {
        //     lineWidth: 5,
        //   }
        // },
      })
      this.graph.data(thisdata);

      // if (this.curNodeId === 'T10003') {
      //   this.graph.data(drawingdata)
      // } else if (this.curNodeId === 'T10004') {
      //   this.graph.data(checkdata)
      // } else if(this.curNodeId === 'T10005') {
      //   this.graph.data(budgetdata)
      // } else if (this.curNodeId === 'T10006') {
      //   this.graph.data(parameterdata)
      // } else if (this.curNodeId === 'T10007') {
      //   this.graph.data(implementationdata)
      // } else if (this.curNodeId === 'T10008') {
      //   this.graph.data(drawingPdfdata)
      // } else if (this.curNodeId === 'T10009') {
      //   this.graph.data(budgetPdfdata)
      // } else if (this.curNodeId === 'T10010') {
      //   this.graph.data(parameterPdfdata)
      // } else if (this.curNodeId === 'T10011') {
      //   this.graph.data(combinedata)
      // } else if (this.curNodeId === 'T10012') {
      //   this.graph.data(printdata)
      // } else if (this.curNodeId === 'T10013') {
      //   this.graph.data(enddata)
      // }
      // else {
      //   this.graph.data({})
      // }

      this.graph.render();

      // 事件-----
      // node
      this.graph.on('node:mouseenter', (e) => {
        const nodeItem = e.item
        this.graph.setItemState(nodeItem, 'hover', true)
      })
      this.graph.on('node:mouseleave', (e) => {
        const nodeItem = e.item
        this.graph.setItemState(nodeItem, 'hover', false)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  // height: 700px;
  border: 1px solid rgb(235, 238, 245);
  position: relative;
}
.canvasStyle {
  text-align: center;
}
/deep/ .el-card__body {
  padding: 0;
}
</style>